<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>数据分析大屏</title>
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.2.2/dist/echarts.min.js"></script>
    <style>
        body {
            background-color: #0e0e0e;
            color: white;
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            display: flex;
            flex-direction: column;
            height: 100vh;
            overflow: hidden;
        }
        header {
            text-align: center;
            padding: 20px;
            background-color: #141414;
            font-size: 24px;
            font-weight: bold;
        }
        main {
            display: flex;
            flex-grow: 1;
            padding: 20px;
        }
        .chart-container {
            flex: 1;
            padding: 10px;
        }
        #lineChart, #pieChart, #barChart {
            width: 100%;
            height: 400px;
        }
        table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 10px;
        }
        table, th, td {
            border: 1px solid white;
        }
        th, td {
            padding: 10px;
            text-align: center;
        }
    </style>
</head>
<body>

<header>
    数据分析大屏
</header>

<main>
    <div class="chart-container">
        <div id="lineChart"></div>
    </div>
    <div class="chart-container">
        <div id="pieChart"></div>
    </div>
    <div class="chart-container">
        <div id="barChart"></div>
    </div>
</main>

<footer>
    <table>
        <thead>
            <tr>
                <th>购药时间</th>
                <th>社保卡号</th>
                <th>商品编码</th>
                <th>商品名称</th>
                <th>销售数量</th>
                <th>应收金额</th>
                <th>实收金额</th>
            </tr>
        </thead>
        <tbody>
            <!-- 数据行会通过Jinja2模板或动态生成 -->
        </tbody>
    </table>
</footer>

<script>
    // 示例数据
    var lineChartData = {
        categories: ['1月', '2月', '3月', '4月', '5月'],
        values: [150, 230, 224, 218, 135]
    };

    var pieChartData = [
        { value: 335, name: '商品A' },
        { value: 310, name: '商品B' },
        { value: 234, name: '商品C' },
        { value: 135, name: '商品D' },
        { value: 1548, name: '商品E' }
    ];

    var barChartData = {
        categories: ['商品A', '商品B', '商品C', '商品D', '商品E'],
        values: [10, 52, 200, 334, 390]
    };

    // 折线图
    var lineChart = echarts.init(document.getElementById('lineChart'));
    var lineOption = {
        title: { text: '销售趋势（按月）', textStyle: { color: '#fff' } },
        xAxis: { type: 'category', data: lineChartData.categories, axisLabel: { color: '#fff' } },
        yAxis: { type: 'value', axisLabel: { color: '#fff' } },
        series: [{ data: lineChartData.values, type: 'line' }]
    };
    lineChart.setOption(lineOption);

    // 饼图
    var pieChart = echarts.init(document.getElementById('pieChart'));
    var pieOption = {
        title: { text: '商品销售占比', textStyle: { color: '#fff' }, left: 'center' },
        tooltip: { trigger: 'item' },
        series: [
            {
                name: '销售占比',
                type: 'pie',
                radius: '50%',
                data: pieChartData,
                label: { color: '#fff' }
            }
        ]
    };
    pieChart.setOption(pieOption);

    // 柱状图
    var barChart = echarts.init(document.getElementById('barChart'));
    var barOption = {
        title: { text: '商品销售数量', textStyle: { color: '#fff' } },
        xAxis: { type: 'category', data: barChartData.categories, axisLabel: { color: '#fff' } },
        yAxis: { type: 'value', axisLabel: { color: '#fff' } },
        series: [{ data: barChartData.values, type: 'bar' }]
    };
    barChart.setOption(barOption);
</script>

</body>
</html>
